<template>
  <div class="orders">
    <div class="header">
      <!-- 打卡 -->
      <router-link to="/Backstage" class="shou">首页</router-link>/ 订单管理 / 订单列表
    </div>
    <!-- 中间的表格 -->
    <div class="biaoge">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="order_number" label="订单编号" width="350"></el-table-column>
        <el-table-column prop="order_price" label="订单价格" width="130"></el-table-column>
        <el-table-column prop="pay_status" label="是否付款" width="130">
          <template slot-scope="scope">
            <div v-if="scope.row.pay_status==0" style="font-size:12px;text-align:center;color:#F681B0;height:30px;width:60px;line-height:30px;border:1px solid #FCD5D5;border-radius: 5px;background:#FEF0F0;">未付款</div>
            <div v-if="scope.row.pay_status==1" style="font-size:12px;text-align:center;color:#67C23A;height:30px;width:60px;line-height:30px;border:1px solid #C2E7B0;border-radius: 5px;background:#FEF0F0;">已付款</div>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货"></el-table-column>
        <el-table-column label="下单时间">
          <template slot-scope="scope">{{scope.row.create_time | dealTime}}</template>
        </el-table-column>
        <el-table-column prop="mg_state" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="fang(scope.row.username,scope.row.email,scope.row.mobile,scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="tiaoshu"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="zong">
      </el-pagination>
    </div>
  </div>
</template>

<script> 
import axios from 'axios';
import moment from 'moment'
import {ddlb} from '../../api/api.js'
export default {
    name:'orders',
    data() {
      return {
        currentPage4: 1,
        tableData: [],
        tiaoshu:[10,20,30],
        pagesize:10,
        zong:1,
      }
    },
    methods:{
      xin(){
        ddlb({
        'query':'',
        'pagenum':this.currentPage4,
        'pagesize':this.pagesize,
        }).then(res=>{
          console.log(res)
          if(res.data.meta.status>=200&&res.data.meta.status<300){
            this.zong=res.data.data.total
            this.tableData=res.data.data.goods
          }
          console.log('data',this.tableData)
        })
      },
      //分页器
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pagesize=val;
        console.log(this.pagesize);
        this.xin()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage4=val;
        console.log(this.currentPage4);
        this.xin()
      },
      fang(){
        
      }
    },
    //日期
    filters: {
      dealTime(val){
        return moment(val).format()
      }
    },
    created(){
      this.xin()
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.orders{
  height:832px;
  width:1620px;
  background-color: #fff;
  border:1px solid #E9EEF3;
  box-shadow: 0 0 10px #ccc;
  border-radius: 5px;
  font-size: 14px;
  padding: 20px;
  overflow:scroll;
  overflow-x:auto
}
.header{
  color:#606266;
  letter-spacing:2px;
}
.shou{
  font-weight: bold;
  color:black;
}
.biaoge{
  margin-top: 20px;
}
</style>
